<template>
  <view>
    <my-search @click.native='searchClick'></my-search>

    <view class="scroll-view-container">
      <!-- 左侧 -->
      <scroll-view class="left-scroll" scroll-y="true" :style="{height:wh+'px'}">
        <view v-for="(item,index) in cateData" :class="{active:active===index?true:''}" :key="index"
          class="left-scroll-view-item" @click="activeChange(index,item)">{{item.cat_name}}</view>
      </scroll-view>
      <!-- 右侧 -->
      <scroll-view :scroll-top="scrollTop" class="right-scroll" scroll-y="true" :style="{height:wh+'px'}">
        <view v-for="(item2,i2) in acteLevel2" :key="i2">
          <view class="title">{{item2.cat_name}}</view>
          <view class="cate-img">
            <view v-for="(item3,i3) in item2.children" :key="i3" @click="goToGoodsList(item3)">
              <image :src="item3.cat_icon"></image>
              <view style="font-size: 20rpx;text-align: center;">{{item3.cat_name}}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import minix from "@/minixs/tabbar-badge.js"
  export default {
    mixins: [minix],
    data() {
      return {
        wh: 0,
        cateData: [],
        active: 0,
        acteLevel2: [],
        scrollTop: 0
      };
    },
    onLoad() {
      const sysInfo = uni.getSystemInfoSync()
      this.wh = sysInfo.windowHeight
      this.getCate()
    },
    methods: {
      async getCate() {
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/categories')
        if (res.meta.status !== 200) return uni.$showMsg()
        this.cateData = res.message
        this.acteLevel2 = res.message[0].children
      },
      activeChange(index, item) {
        this.active = index
        this.acteLevel2 = item.children
        this.scrollTop = this.scrollTop === 0 ? 1 : 0
      },
      goToGoodsList(item) {
        uni.navigateTo({
          url: '/subpkg/goods_list/goods_list?cid=' + item.cat_id
        })
      },
      searchClick() {
        uni.navigateTo({
          url: '/subpkg/searchPage/searchPage'
        })
      }
    }
  }
</script>

<style lang="scss">
  .scroll-view-container {
    display: flex;

    .left-scroll {
      width: 120px;
    }
  }

  .left-scroll-view-item {
    background-color: #f7f7f7;
    line-height: 60px;
    text-align: center;
    font-size: 12px;

    &.active {
      background-color: #fff;
      position: relative;

      &::before {
        content: '';
        display: block;
        width: 3px;
        height: 30px;
        background-color: #C00000;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);

      }
    }
  }

  .title {
    text-align: center;
    font-weight: bolder;
  }

  .cate-img {
    display: flex;
    flex-wrap: wrap;

    image {
      margin: 10rpx;
      width: 160rpx;
      height: 160rpx;
    }

  }
</style>